<template>
  <span>
    <a-button shape="circle" @click="add">
      <template #icon>
        <iconpark-icon name="add"></iconpark-icon>
      </template>
    </a-button>
    <a-modal
      center
      v-model:visible="Visible"
      :title="'添加' + title"
      @cancel="cencelVisible"
      @ok="onSubmit"
    >
      <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="类型" name="type">
          <a-select v-model:value="formState.type" :options="options"> </a-select>
        </a-form-item>
        <a-form-item :label="formState.type === 0 ? '方' : '度'" name="count">
          <a-input-number size="large" :min="0" v-model:value="formState.count" />
        </a-form-item>
        <a-form-item label="时间" name="outTime">
          <a-date-picker
            :locale="locale"
            v-model:value="formState.day"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="请选择时间"
            style="width: 100%"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </span>
</template>
<script>
import {
  defineComponent,
  getCurrentInstance,
  computed,
  onMounted,
  reactive,
  ref,
} from "vue";
import { message } from "ant-design-vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
export default defineComponent({
  props: {
    Type: { type: String, default: "water" },
  },

  setup(props) {
    const { proxy } = getCurrentInstance();
    const Visible = ref(false);
    const options = reactive([
      {
        value: 0,
        label: "水费",
      },
      {
        value: 1,
        label: "电费",
      },
    ]);
    const formState = reactive({
      count: 0,
      type: 0,
      day: "",
    });
    onMounted(() => {
      // console.log(proxy);
    });
    const title = computed(() => {
      if (props.Type === "water") {
        formState.type = 0;
        return "水量";
      } else {
        formState.type = 1;
        return "电量";
      }
    });
    const add = () => {
      Visible.value = true;
    };
    function cencelVisible() {
      Visible.value = false;
    }
    //表单
    const onSubmit = () => {
      console.log(formState);
      proxy.$api
        .post("house/add", formState)
        .then((res) => {
          console.log(res);
          if (res.error === 0) {
            message.success(res.message);
            Visible.value = false;
            proxy.$emit("reLoad");
          } else message.error(res.message);
          Visible.value = false;
        })
        .catch((error) => {
          console.log("error", error);
        });
    };
    return {
      locale,
      title,
      options,
      Visible,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      formState,
      cencelVisible,
      add,
      onSubmit,
    };
  },
});
</script>
